<template>
   <div>
        <wsPage title="提现记录">
            <div slot="page_operate">
                <Button type="ghost" @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
            </div>
            <wsSmPanel :page="table.page" @simple-query="query">
                <div slot="query_form">
                    <Form  :label-width="100" inline>
                        <FormItem label="状态" >
                            <RadioGroup v-model="drawRecord.status" type="button">
                                <Radio :label="1">申请中</Radio>
                                <Radio :label="2">审核通过</Radio>
                                <Radio :label="3">完成</Radio>
                                <Radio :label="4">审核驳回</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="申请时间">
                            <Row>
                                <Col span="11">
                                    <FormItem>
                                        <DatePicker type="date" placeholder="开始时间" v-model="drawRecord.searchStartTime" @on-change="dateConfirm"></DatePicker>
                                    </FormItem>
                                </Col>
                                <Col span="2" style="text-align: center">-</Col>
                                <Col span="11">
                                    <FormItem>
                                        <DatePicker type="date" placeholder="结束时间" v-model="drawRecord.searchEndTime" @on-change="dateConfirm"></DatePicker>
                                    </FormItem>
                                </Col>
                            </Row>      
                        </FormItem>
                    </Form>
                </div>
                <div slot="list_data">
                    <ws-table style="width: 100%" :data="table.data">
                        <ws-table-column align="center" prop="sn"  label="流水号"></ws-table-column>
                        <ws-table-column align="center"  label="状态">
                                <template slot-scope="scope">
                                <span v-if="scope.row.status==1">申请中</span>
                                <span v-if="scope.row.status==2">审核完成</span>
                                <span v-if="scope.row.status==3">完成</span>
                                <span v-if="scope.row.status==4">审核驳回</span>
                            </template>
                        </ws-table-column>
                        <ws-table-column align="center" prop="userName"  label="收款人"></ws-table-column>
                        <ws-table-column align="center" prop="accountNumber"  label="收款账户"></ws-table-column>
                        <ws-table-column align="center" prop="money"  label="提现金额"></ws-table-column>
                        <ws-table-column align="center" prop="serviceCharge"  label="服务费"></ws-table-column>
                        <ws-table-column align="center" prop="actualMoney" label="应收"></ws-table-column>
                        <ws-table-column align="center" prop="createDate"  label="申请时间"></ws-table-column>
                        <ws-table-column align="center" prop="memo" label="备注"></ws-table-column>
                        <ws-table-column align="center" width="120" :label="$t('Permission.operating')">
                            <template slot-scope="scope">
                                <Button type="text" size="small" @click="seeDetails(scope.row.id)">查看详情</Button>
                            </template>
                        </ws-table-column>
                    </ws-table>
                </div>
            </wsSmPanel>

             <!-- 提现详情弹框 -->
            <wsModal title="提现记录详情" v-model="withDrawDetails.show" :whetherShowCancel="false" :whetherShowOk="false">
                <Row style="text-align:center;line-height:30px;font-size:16px;">
                    <Col span="24">收款账户：{{withDrawDetails.data.accountNumber}}</Col>
                    <Col span="24">银行：{{withDrawDetails.data.bank}}</Col>
                    <Col span="24">提现金额：{{withDrawDetails.data.money}}</Col>
                    <Col span="24">服务费：{{withDrawDetails.data.serviceCharge}}</Col>
                    <Col span="24">实得金额：{{withDrawDetails.data.actualMoney}}</Col>
                    <Col span="24">创建日期：{{withDrawDetails.data.createDate}}</Col>
                </Row>
            </wsModal>
        </wsPage>    
   </div> 
</template>


<script>
export default {
    data(){
        return {
            table:{
                data:[],
                page:{
                    total: 0, //总条数
                    pageNum: 1, //当前页
                    pageSize: 10 //每页显示条数
                }
            },
            drawRecord:{
                status:1,
                searchStartTime:'',
                searchEndTime:''
            },
            // 提现详情
            withDrawDetails:{
                show:false,
                data:{}
            }
        }
    },

    computed:{

    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            this.query();
        },
        refresh(){
            this.drawRecord.status=1;
            this.drawRecord.searchStartTime='';
            this.drawRecord.searchEndTime='';
            this.query();
        },
        query(){
            let _this=this;
            let pageNum=_this.table.page.pageNum;
            let status=_this.drawRecord.status;
            let searchStartTime=_this.drawRecord.searchStartTime;
            let searchEndTime=_this.drawRecord.searchEndTime;
            this.axios.get('/ws/ms/withdraw/record/'+pageNum+'?status='+status+'&searchStartTime='+searchStartTime+'&searchEndTime='+searchEndTime).then(response=>{
                let res=response.data;
                console.log(res);
                if(res.meta.code==0){
                    this.table.data=res.data.list;
                }
            })
        },
        //查询开始时间段必填
        dateConfirm(){
            let searchStartTime = this.drawRecord.searchStartTime;
            let searchEndTime = this.drawRecord.searchEndTime;
            if (searchStartTime != null ||searchStartTime != '') {
                searchEndTime = new Date();
            } else if (searchEndTime != null || searchEndTime !='') {
                searchStartTime = searchEndTime;
            }
        },
        // 查看提现详情
        seeDetails(id){
            this.axios.get('/ws/ms/withdraw/record/ms/'+id).then(response=>{
                let res=response.data;
                console.log(res);
                if(res.meta.code==0){
                    this.withDrawDetails.show=true;
                    this.withDrawDetails.data=res.data;
                }
            })
        }


    }

}
</script>

<style>

</style>
